<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div>{{info}}
    <h1 v-text="info"></h1>
    <p v-html="info"></p>
    <input type="text" v-model="username">
    <h1>你输入的值是：{{username}}</h1>


    <br/>
    <p :style="{backgroundColor:BC}">这是一个P标签</p>

    <input type="button" value="弹窗" @click="f1()">

    <p v-for="name in arr">{{name}}</p>


     <h1 v-if="isVisible">+++张学友+++</h1>

    <h1 v-show="isVisible">+++张学友+++</h1>
</div>

<script>
    let v = new Vue({
        el: "div",
        data: {
            info: "Hello VUE!",

            username: "tedu",
            value: "",
            BC: "red",
            arr: ["刘备", "关羽", "诸葛亮", "孙尚香", "刘禅"],
            isVisible:false

        }, methods: {
            f1() {
                alert("Hello VUE!");
            }
        }
    })
    setTimeout(function () {
        v.info = "值改变了",
        v.isVisible=true;
    }, 3000)
</script>
</body>
</html>

<!-- - {{变量}}:  插值, 将此处显示的文本内容和变量进行绑定,这种写法不依赖标签-->
<!-- - v-text="变量":  让元素的文本内容和变量进行绑定   -->
<!-- - v-html="变量":  让元素的标签内容和变量进行绑定-->
<!-- - v-model="变量": 双向绑定(变量的值会影响页面控件显示的内容,控件内容的改变也会影响变量) -->
<!-- - v-bind:属性名="值":  属性绑定 , 让元素某个属性的值和变量进行绑定    去掉v-bind是简写-->
<!-- - v-on:事件名="方法"   事件绑定 ,  当事件触发时会调用指定的方法    @事件名是简写-->
<!-- - v-for="变量 in 数组"    循环遍历 , 遍历的同时生成元素   -->
<!-- - v-if="变量",    控制元素是否显示   true显示  false不显示(删除元素)-->
<!-- - v-show="变量", 控制元素是否显示  true显示  false不显示(隐藏元素)-->